<template>
  <div class="app-container">
    <div class="view-title">分享活动产品</div>
    <div class="add_box">
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </div>
    <div>
      <el-table :data="tableDataInvite" style="width: 100%">
        <el-table-column prop="id" label="id" width="80"> </el-table-column>
        <el-table-column prop="name" label="产品名称" width="180">
        </el-table-column>
        <el-table-column prop="package_code" label="产品编码">
        </el-table-column>
        <el-table-column prop="cover_img" label="产品图标">
          <template slot-scope="scope">
            <img
              :src="scope.row.cover_img"
              alt=""
              style="width: 80px"
              v-if="scope.row.cover_img"
            />
          </template>
        </el-table-column>
        <el-table-column prop="points" label="积分"> </el-table-column>
        <el-table-column prop="status" label="启用状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ccc"
              :active-value="1"
              :inactive-value="0"
              @change="upEnabled($event, scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button @click="handleDelete(scope.row)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNow"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 新增弹窗 -->
    <add-invite
      ref="refAddInvite"
      @sureDialogAdd="sureDialogAdd"
      @cancelDialogAdd="cancelDialogAdd"
    />

    <!-- 编辑 -->
    <edit-invite
      ref="refEditInvite"
      :editDetails="editDetails"
      @sureDialogEdit="sureDialogEdit"
      @cancelDialogEdit="cancelDialogEdit"
    />
  </div>
</template>
<script>
import {
  getShareActivePackageList,
  getShareActivePackageInfo,
  addShareActivePackage,
  updateShareActivePackage,
  deleteShareActivePackage,
} from "@/api/inviteFriends";
import AddInvite from "./components/addInvite.vue";
import EditInvite from "./components/editInvite.vue";
export default {
  components: {
    AddInvite,
    EditInvite,
  },
  data() {
    return {
      tableDataInvite: [],
      queryParams: {
        pageNow: 1,
        pageSize: 10,
      },
      total: null,
      editDetails: {},
    };
  },
  mounted() {
    this.getShareActivePackageList();
  },
  methods: {
    // 获取分享活动产品列表接口
    getShareActivePackageList() {
      getShareActivePackageList({
        page_now: this.queryParams.pageNow,
        page_size: this.queryParams.pageSize,
      }).then((res) => {
        if (res.code == 1) {
          this.tableDataInvite = res.data;
          this.total = res.page_info.total_count;
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 新增接口
    addShareActivePackage(val) {
      addShareActivePackage({
        name: val.name,
        points: val.points,
        package_code: val.package_code,
        cover_img: val.cover_img,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success("新增成功");
          this.$refs.refAddInvite.dialogVisibleAddInvite = false;
          this.$refs.refAddInvite.addForm = {};
          this.getShareActivePackageList();
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 新增
    handleAdd() {
      this.$refs.refAddInvite.dialogVisibleAddInvite = true;
    },

    // 新增弹窗确定
    sureDialogAdd(val) {
      this.addShareActivePackage(val);
    },

    // 新增弹窗取消
    cancelDialogAdd() {
      this.$refs.refAddInvite.dialogVisibleAddInvite = false;
      this.$refs.refAddInvite.addForm = {};
    },

    // 查询单条接口
    getShareActivePackageInfo(val) {
      getShareActivePackageInfo({
        id: val.id,
      }).then((res) => {
        if (res.code == 1) {
          this.editDetails = res.data;
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 编辑接口
    updateShareActivePackage(val) {
      updateShareActivePackage({
        id: val.id,
        name: val.name,
        package_code: val.package_code,
        points: val.points,
        cover_img: val.cover_img,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success("编辑成功");
          this.$refs.refEditInvite.dialogVisibleEditInvite = false;
          this.getShareActivePackageList();
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    // 编辑
    handleEdit(val) {
      this.getShareActivePackageInfo(val);
      this.$refs.refEditInvite.dialogVisibleEditInvite = true;
    },

    // 编辑弹窗确定
    sureDialogEdit(val) {
      this.updateShareActivePackage(val);
    },

    // 编辑弹窗取消
    cancelDialogEdit() {
      this.$refs.refEditInvite.dialogVisibleEditInvite = false;
    },

    // 删除接口
    deleteShareActivePackage(val) {
      deleteShareActivePackage({
        ids: val.id,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success("上传成功");
          this.getShareActivePackageList();
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 删除
    handleDelete(val) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteShareActivePackage(val);
        })
        .catch(() => {});
    },

    // 启用状态接口
    updateShareActivePackageStatus(e, val) {
      updateShareActivePackage({
        id: val.id,
        name: val.name,
        package_code: val.package_code,
        points: val.points,
        status: e,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success("编辑成功");
          this.$refs.refEditInvite.dialogVisibleEditInvite = false;
          this.getShareActivePackageList();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 切换上下架
    upEnabled(e, val) {
      this.updateShareActivePackageStatus(e, val);
    },

    // 分页
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.queryParams.pageNow = 1;
      this.getShareActivePackageList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageSize = 10;
      this.queryParams.pageNow = val;
      this.getShareActivePackageList();
    },
  },
};
</script>
<style scoped lang="scss">
.add_box {
  padding-bottom: 10px;
}
</style>
